<!--时钟图标的弹窗组件-->
<template>
  <!--弹窗最外层的容器-->
  <div v-show="isShowCommentConfirm" id="textInput">
    <div v-transfer-dom>
      <alert v-model="isShowAlert" @on-hide="commentOver"> {{alertText}}</alert>
    </div>
    <!--弹窗的窗口，遮罩层-->
    <div class="textInput_content">
      <!--弹窗头部-->
      <div class="textInput_content_border">
        <div style="font-size:20px; padding-top:10px; padding-bottom:10px;">
          <span style="font-size:20px; color:rgb(70,83,109); font-weight:bold">请输入{{commentType}}内容</span>
        </div>
        <div>
          <textarea style="width:80%; height:70px; font-size:15px"
          v-model="commentText"></textarea>
        </div>
      </div>
      <!--操作按钮-->
      <div class="click_btn">
        <button class="my_button" @click="cancel">取消</button>
        <button class="my_button" @click="addComment">{{commentType}}</button>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'Vuex'
  import comment from 'api/comment'
  import report from 'api/report'
  import common from 'utilMethods/common.js'
  export default {
    props: {
      isShowCommentConfirm: {type: Boolean}
    },
    data () {
      return {
        alertText: '',
        isShowAlert: false,
        commentText: '',
        commentSuccessfully: true,
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['reportCommented',
                   'commentSelected',
                   'commentType', 
                   'reportContentProf', 
                   'reportListQueryParams',
                   'currentGroupId'])
    },
    methods: {
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
      },
      cancel () {
        this.commentText = ''
        this.$emit('update:isShowCommentConfirm', false)
      },
      async addComment () {
        this.commentSuccessfully = this.judgeCommentText(this.commentText);
        if (!this.commentSuccessfully) return
        let commentParams = this.getCommentParams(this.commentText, this.commentType);
        const result = await comment.postAddComment(commentParams)
        if (1 === result.code) {
          // 更新添加了评价的日报
          const res = await report.getReportsByGroupId(this.reportListQueryParams)
          this.$store.dispatch('getReportContentProf', res.data)
          this.showAlert(this.commentType + '成功')
        } else {
          this.showAlert(this.commentType + '提交失败')
          setTimeout(this.closeTip, 1700)
        }
      },
      judgeCommentText (commentText) {
        let reg = /^[ ]*$/;
        if (reg.test(commentText)) {
          this.showAlert(this.commentType + '内容不可为空');
          return false;
        }
        return true;
      },
      getCommentParams (commentText, commentType) {
        commentText = commentText.replace(/(^\s*)|(\s*$)/g, ""); //去除两端空格
        let commentTimeStamp = common.getCurrentTime();
        let commentParams = {};
        if (commentType === '评价') {
          commentParams = {
            content: this.commentText,
            createTime: commentTimeStamp,
            reportId: this.reportCommented.reportId,
            reportType: 0,//这里要优化
            userId: this.userInfo.userId,
            groupId: this.currentGroupId
          };
        } else {
          commentParams = {
            content: this.commentText,
            createTime: commentTimeStamp,
            reportId: this.commentSelected.reportId,
            reportType: 0,
            userId: this.userInfo.userId,
            replyUserId: this.commentSelected.userId,
            groupId: this.currentGroupId
          };
        }
        console.log('commentParams')
        console.log(commentParams)
        return commentParams;
      },
      commentOver () {
        if (this.commentSuccessfully) {
          this.commentText = '';
          this.$emit('update:isShowCommentConfirm', false)
        }
      }
    }
  }
</script>
<style scoped>
  #textInput {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    display: flex;
  }

  .textInput_content {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
  }

  .textInput_content_border {
    border-radius: 5px;
    height: auto;
    width: 95%;
    margin: 0 auto;
  }

  .textInput_title {
    height: 25px;
    width: 130px;
    text-align: center;
    border: 2px #1abc9c solid;
    border-radius: 50px;
    padding: 5px 5px 10px;
  }

  .textInput_search_input {
    margin-left: 10%;
  }

  .search_input {
    border: 1px #999 solid;
    width: 200px;
    height: 20px;
    border-radius: 20px;
    padding-left: 10px;
  }

  .userList {
    border: 1px gray solid;
    width: 100%;
    /*height: 100%;*/
    overflow: scroll;
    max-height: 250px;
  }

  .list {
    height: 30px;
    width: 500px;
    box-sizing: content-box;
    text-align: left;
    
  } 

  .list_icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    font-size: 30px;
    margin-left: 3px;
    margin-right: 1px;
    margin-top: 2px;
  }

  .list_name {
    display: inline-block;
    margin-left: 15px;
    width: 100%;
    height: auto;
  }

  hr {
    margin-left: 35px;
    margin-right: 3%;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .click_btn {
    height: 40px;
    width: 80%;
    margin: 3px auto;
    display: flex;
    justify-content: space-around;
    /*position: fixed;*/
    /*top:90%*/
  }

  .my_button {
    width: 120px;
    height: 40px;
    border: none;
    color: white;
    background: #1abc9c;
    text-align: center;
    outline: none;
    border-radius: 5px;
    margin-left: 15px;
  }
</style>
